@import "../../variable.less";
.@{prefix}{
  &-popup {
    &-title-wrap {
      &.draggable {
        cursor: move;
      }
    }
    &-box {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50% , -50%);
      z-index: 1000;
      color: var(--text-color);
      transform-origin: center center;
      &.fullscreen {
        transition: all 0.3s;
      }
      &.resize {
        resize: both;
        overflow: auto;
      }
      &-inner {
        display: flex;
        flex-flow: column;
        height: 100%;
      }
      &-content {
        flex: 1;
        padding: 16px;
        overflow: auto;
        box-sizing: border-box;
        background-color: var(--bg-color);
      }
    }
    &-title {
      display: flex;
      align-items: center;
      padding: 0 16px;
      line-height: 1;
      height: 40px;
      border-bottom: 1px solid var(--border-color);
      background-color:var(--bg-color);
      &-left {
        &-text {
          font-size: var(--font-size-base);
          color: var(--text-color);
        }
      }
      &-right {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        &-icon {
          font-size: var(--font-size-base);
          margin-right: 8px;
          color: var(--icon-color);
          cursor: pointer;
          &:hover {
            opacity: 0.8;
          }
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
    &-mask {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.3);
      z-index: 1000;
    }
    &-fade-enter-active , &-fade-leave-active {
      transition: all 0.3s;
    }
    &-fade-enter-from , &-fade-leave-to {
      opacity: 0;
    }
    &-zoom-enter-active , &-zoom-leave-active {
      transition: opacity 0.3s , transform 0.3s;
      transform-origin: center center;
    }
    &-zoom-enter-from , &-zoom-leave-to {
      opacity: 0;
      transform: translate(-50% , -50%) scale(1 , 0);
    }
    &-slide-up-enter-active , &-slide-up-leave-active {
      transition: all 0.3s;
    }
    &-slide-up-enter-from , &-slide-up-leave-to {
      opacity: 0;
      transform: translate(-50% , -36%);
    }
    &-slide-down-enter-active , &-slide-down-leave-active {
      transition: all 0.3s;
    }
    &-slide-down-enter-from , &-slide-down-leave-to {
      opacity: 0;
      transform: translate(-50% , -64%);
    }
    &-scale-enter-active , &-scale-leave-active {
      transition: all 0.3s;
    }
    &-scale-enter-from , &-scale-leave-to {
      opacity: 0;
      transform: translate(-50% , -50%) scale(0.6);
    }
    &-scale-width-enter-active , &-scale-width-leave-active {
      transition: all 0.3s;
    }
    &-scale-width-enter-from , &-scale-width-leave-to {
      opacity: 0;
      transform: translate(-50% , -50%) scale(0.6 , 1);
    }
  }
}